<!-- 图文导航属性 -->
<template>
  <div class="drag-nav-bar-props">
    <div class="image-item-wrapper">
      <image-item
        v-for="(item, index) in list"
        :key="index"
        v-bind.sync="item"
        :index="index"
        @remove="doRemove"
      />
    </div>
    <a-button @click="addBar">添加导航</a-button>
    <radio-selection label="每行个数" :selected.sync="iRowCount" :options="rowCountOptions" />
    <color-selection label="背景颜色" :color.sync="iBgColor" />
    <color-selection label="文字颜色" :color.sync="iTextColor" />
  </div>
</template>

<script>
  import { RadioSelection, ColorSelection, ImageItem } from './other'
  import cloneDeep from 'lodash.clonedeep'
  export default {
    name: 'DraggableNavBarProps',
    components: {
      RadioSelection,
      ColorSelection,
      ImageItem
    },
    props: {
      list: {
        type: Array,
        default: () => []
      },
      backgroundColor: {
        type: String
      },
      textColor: {
        type: String
      },
      rowCount: {
        type: Number
      },
      total: {
        type: Number
      }
    },
    computed: {
      iBgColor: {
        get () {
          return this.backgroundColor
        },
        set (val) {
          this.$emit('update:backgroundColor', val)
        }
      },
      iTextColor: {
        get () {
          return this.textColor
        },
        set (val) {
          this.$emit('update:textColor', val)
        }
      },
      iRowCount: {
        get () {
          return this.rowCount
        },
        set (val) {
          // const { total, list } = this
          // if (val > total) {
          //   const listClone = cloneDeep(list)
          //   for (let i = listClone.length; i < val; i++) {
          //     listClone.push({
          //       imgSrc: '',
          //       title: `标题${i + 1}`
          //     })
          //   }
          //   this.$emit('update:total', val)
          //   this.$emit('update:list', listClone)
          // }
          this.$emit('update:rowCount', val)
        }
      },
      iTotal: {
        get () {
          return this.total
        },
        set (val) {
          this.$emit('update:total', val)
        }
      }
    },
    data () {
      const rowCountOptions = [{
        label: '一行四个',
        value: 4,
        icon: 'icon-icon-test'
      }, {
        label: '一行五个',
        value: 5,
        icon: 'icon-icon-test1'
      }]
      return {
        rowCountOptions
      }
    },
    methods: {
      doRemove (index) {
        const cloneList = cloneDeep(this.list)
        cloneList.splice(index, 1)
        this.$emit('update:list', cloneList)
      },
      addBar () {
        const cloneList = cloneDeep(this.list)
        cloneList.push({
          imgSrc: '',
          title: `标题${cloneList.length + 1}`,
          link: ''
        })
        this.$emit('update:list', cloneList)
      }
    }
  }
</script>

<style lang="less" scoped>
  .drag-nav-bar-props {
    .image-item-wrapper {
      min-height: 320px;
      max-height: 400px;
      overflow-y: auto;
    }
  }
</style>
